<template>
    <!-- <div>数据地图</div> -->
    <SubTitle>
        <template #subtitle>数据地图</template>
      </SubTitle>
  <div ref="mymap" class="mymap">map</div>
</template>

<script>
import * as echarts from 'echarts';
import {SCMapData} from '../../assets/mapdata/四川省-area.js'
import SubTitle from './SubTitle.vue';
export default {
    components:{
        SubTitle
    },
    mounted(){
        setTimeout(() => {
            
            let mymap =  echarts.init(this.$refs.mymap);
   echarts.registerMap("SCMap",SCMapData);
   let option = {

    geo:{
      type:'map',
      map:'SCMap',
      roam:true,//平移
      zoom:1,//初始化缩放比例
    },
    series:[
        // 散点图
        {
            type:'scatter',// effectScatter
            data:[
                {
                    name:'dcwecwd',
                    value:[
                    104.25291432101183,
                            29.63734881007337,
                            123
                    ]
                }
            ],
            coordinateSystem:'geo',
            SymbolSize:30,
            label:{
                show:true
            }
        },
        {
            type:'effectScatter',// scatter
            data:[
                {
                    name:'dcwecwd',
                    value:[
                    102.0059238014783,
                            28.71184917991473,
                            123
                    ]
                }
            ],
            coordinateSystem:'geo',
            SymbolSize:30,
            label:{
                show:false
            },
            rippleEffect:{//涟漪效果设置
                number:2,//波纹数量
                scale:4,
            },
            itemStyle:{
                color:'blue'
            }
        }
    ],
   };
   mymap.setOption(option);


        }, 1);
   
  }
}
</script>

<style lang="less" scoped>
.mymap{
    width:100%;height:290px;
}
@media screen and (max-width: 720px) {
    .mymap{
      width: 100%;
      height: 300px;
    }
  }
</style>